<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>书名：<input type="text" v-model="book.f_title"></div>
        <div>作者：<input type="text" v-model="book.f_author"></div>
        <div>类型：<select v-model="book.f_type">
            <option v-for="t in types">{{t}}</option>
        </select>
        </div>
        <div>价格:<input type="text" v-model="book.f_price"></div>
        <div>封面：<input type="file"  @change="onChange"></div>
        <div><button @click="onClick">确定</button></div>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script>

        let vm=new Vue({
            el:'#app',
            data:{
                types:['小说','散文','教材','诗歌'],
                img:null,
                book:{f_id:0,f_title:'',f_author:'',f_price:0,f_image:''}
                 },
            methods:{
                onChange(e){
                    this.img=e.target.files[0]
                let _this=this

                let formData =new FormData()
                formData.append('image',this.img)

                axios.post('http://localhost:44355/Book/upload',formData)
                .then(function (rs)
                {
                    _this.book.f_image=rs.data.image
                    console.log("上传图片ok:"+rs.data.Data.image);
                })
                },

                 onClick(){
                    let _this=this
                    axios.post('http://localhost:44355/Book/add',_this.book)
                    .then(function(rs){
                        console.log(rs.data);
                    })
                 }
                
            },
        })
    </script>
    
</body>
</html>